﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.orrg/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Dribble Ball</title>
    <link rel="stylesheet" href="../css/db.css" />
    <link rel="stylesheet" href="../css/colorbox.css" />
     <script type="text/javascript" src="../js/track.js"/>
</head>
<body>
    <div id="status">
        <div id="counter">
        </div>
    </div>
    <div id="win">
        <svg xmlns="http://www.w3.org/2000/svg" width="2700" height="600" version="1.1">
            <defs>
                <marker id="mTriangle" markerWidth="50" markerHeight="100" refX="50" refY="50" orient="auto">
                    <path d="M 0 0 50 50 0 100 Z" style="fill: black;" />
                </marker>
                <clipPath id="light">
                    <circle id="ball" r="80" />
                    <circle id="light1" r="0" cx="510" cy="40" />
                    <circle id="light2" r="0" cx="900" cy="250" />
                    <circle id="light3" r="0" cx="1820" cy="400" />
                </clipPath>
            </defs>
            <radialGradient id="grad1" cx="20%" cy="30%" r="100%">
                <stop offset="0%" style="stop-color: rgb(255,255,255); stop-opacity: 0" />
                <stop offset="100%" style="stop-color: #ABD9F7; stop-opacity: 0.4" />
            </radialGradient>
            <linearGradient id="button" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" style="stop-color: #FC1212; stop-opacity: 1" />
                <stop offset="60%" style="stop-color: #F7CBCB; stop-opacity: 1" />
                <stop offset="100%" style="stop-color: #FC1212; stop-opacity: 1" />
            </linearGradient>
            <g id="back">
            </g>
            <rect id="darkbackground" width="100%" height="100%" />
            <g id="main">
                <rect width="100%" height="100%" fill="url(#grad1)" />
                <line x2="0" y2="0" x1="2000" y1="0" db-pad="wood" />
                <line x1="0" y1="500" x2="320" y2="600" db-pad="ground" />
                <line x1="0" y1="600" x2="800" y2="600" db-pad="ground" />
                <g transform="translate(375, 590)" db-button="button1" />
                <g id="hint" transform="translate(580 60)" style="display: none">
                    <path id="hand" transform="rotate(-90)" stroke-width="5" fill="yellow" d="m3.15413,18.13973c1.45895,-0.56738 2.65639,-1.09562 0.3893,-1.11107c-2.00177,0.28494 -7.18101,-1.80971 -3.03076,-2.83932c2.59716,-1.07389 8.50702,1.40649 8.53829,-2.83619c-0.4693,-2.6589 -8.09283,-0.58292 -5.58492,-4.14875c2.76185,-1.19608 8.23813,1.62194 9.16483,-2.07912c-0.84935,-3.58863 -6.16141,-1.29835 -8.83097,-2.29012c-2.58892,0.5654 -3.27038,-3.03942 -0.365,-2.49533c6.71485,-0.38374 13.47723,0.17943 20.16963,-0.60366c1.08082,-0.63414 1.87955,-4.53538 0.51608,-4.79808c-9.7488,-0.21397 -19.51455,-0.01735 -29.24776,-0.65553c-3.49693,-0.03841 -0.82546,-3.9931 1.75917,-3.06437c2.4611,-0.85364 3.43634,-3.09204 5.24278,-5.30219c0.92366,-4.83105 -3.51365,-3.03802 -5.32521,-1.62434c-2.02357,1.40484 -5.50375,4.32099 -7.34941,5.85182c-1.61872,1.23937 -5.34727,2.61471 -7.61545,4.27614c-1.93806,0.72964 -4.05974,0.36631 -5.96429,0.49741c0,6.5456 0,13.09103 0,19.63664c5.38761,2.48443 11.05611,4.66673 17.02903,4.41707c3.49819,-0.01511 7.09695,0.12343 10.50465,-0.831l0,0l-0.00001,0.00001l0.00001,-0.00002l0.00001,0zm-22.19534,2.09937c-2.74983,-1.11906 -5.49499,-2.25253 -8.21994,-3.43827c0.13033,-8.17406 0.26095,-16.34814 0.39131,-24.52221c2.17529,-0.08748 5.40386,1.05555 6.95497,-0.62753c4.16916,-1.41739 6.87652,-4.5523 10.53208,-6.9052c2.57151,-2.14068 4.62639,-2.87131 7.2828,-4.49489c2.01798,-0.98831 3.11063,-0.48362 5.38315,-0.05261c0.991,1.71767 2.22156,2.60551 1.58258,5.87773c-1.33169,0.70973 -3.0608,5.47997 -0.44239,5.5179c7.28833,0.73971 14.69396,-0.29997 21.92492,0.99293c1.80032,2.58183 2.14409,8.38225 -1.1519,10.01957c-3.15369,0.96566 -6.47843,0.48667 -9.71888,0.60274c0,2.44262 0.38126,5.55969 -2.17834,6.78658c-1.89017,2.61099 -2.02304,6.44663 -5.06876,8.35714c-2.56096,2.77985 -6.20765,3.63861 -9.76377,3.54691c-5.83258,0.08369 -11.97085,0.67587 -17.50782,-1.66052l0,-0.00025l0,0l0,-0.00001l0,-0.00001l-0.00001,0z" />
                </g>
                <g transform="translate(580 10) rotate(180)" db-button="button2" />
                <line x1="800" y1="600" x2="800" y2="200" db-pad="ground" />
                <g transform="translate(1400 280) " db-button="button3" />
                <g transform="translate(1500 60)" db-cat="reward" />
                <line x1="800" y1="200" x2="1500" y2="300" db-pad="ground" />
                <line x1="1500" y1="300" x2="1500" y2="600" db-pad="ground" />
                <circle id="moving" cx="1700" cy="300" r="50" db-pad="bad" />
                <g transform="translate(1810 470)" db-cat="reward" />
                <line x1="1900" y1="600" x2="1900" y2="550" db-pad="ground" />
                <line x1="1800" y1="10" x2="2200" y2="10" db-pad="bad" />
                <g transform="translate(2000 130)" db-cat="reward" />
                <line x1="1900" y1="550" x2="2700" y2="300" db-pad="ground" />
                <line x1="2400" y1="250" x2="2560" y2="250" db-cat="target" />
                <line x2="2400" y2="255" x1="2560" y1="255" db-pad="wood" />
                <circle cx="2400" cy="250" r="6" db-pad="wood" />
                <circle cx="2560" cy="250" r="6" db-pad="wood" />
                <line x1="2590" y1="320" x2="2590" y2="130" db-pad="wood" />
                <line x1="2630" y1="600" x2="2630" y2="0" db-pad="bad" />
            </g>
            <rect id="dummy" width="100%" height="100%" fill-opacity="0">
            </rect>
            <g id="front">
            </g>
        </svg>
    </div>
    <div id="skip">
        &lt;&lt; Skip Preview
    </div>
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../js/jquery.countdown.js"></script>
    <script type="text/javascript" src="../js/jquery.colorbox.js"></script>
    <script type="text/javascript" src="../js/svg.js"></script>
    <script type="text/javascript" src="../js/db.js"></script>
    <script type="text/javascript">
        //<![CDATA[
        $(function () {
            db.path = [{ x: 0, y: 300 }, { x: 2700, y: 300}];

            var dir = 2;
            var y = 300;
            db.setTimer(null, function () {
                if (y < 50 || y > 550)
                    dir *= -1;
                y += dir;

                $("#moving").attr("cy", y);
            });

            setInterval(function () {
                $("#hand").setScale(1.1);
                setTimeout(function () {
                    $("#hand").setScale(1);
                    tip.hit(-3, -26, { container: $("#hint") });
                }, 500);
            }, 1000);

            triggers.gameStarted = function () {
                $("#darkbackground").animate({ opacity: 1 }, 1000, function () {
                    $("#main").attr("clip-path", "url(#light)");
                });
            };
            triggers.ballMoved = function (e) {
                $("#ball").attr({ cx: e.position.x, cy: e.position.y });
            };
            triggers.hitButton = function (e) {
                switch (e.sender.attr("db-button")) {
                    case "button1":
                        $("#light1").attr("r", 180);
                        $("#hint").show();
                        break;
                    case "button2":
                        $("#light2").attr("r", 180);
                        $("#hint").hide();
                        break;
                    case "button3":
                        $("#light3").attr("r", 200);
                        break;
                }

            }
            //  highlightDesign();
            startGame({ time: 30, ballPosition: { x: 100, y: 350} });
        });
        //]]>
    </script>
</body>
</html>
